<template>
  <main id="about" class="page">
    <PageBanner :bg_url="page.banner" />
    <div
      class="page-category sticky"
      v-scroll-spy-active="{selector: 'a.term-item'}"
      v-scroll-spy-link="{selector: 'a.term-item'}"
    >
      <span class="title">{{page.cate.title}}</span>
      <a
        class="term-item"
        v-for="(val,k) of page.category"
        :href="`#${k+1}`"
        :key="k"
        @click.prevent="$scrollTo(k)"
      >{{val}}</a>
    </div>

    <div v-scroll-spy="{offset: 140, allowNoActive: false}" class="scrollspy-wrap">
      <section class="section-container">
        <div class="section-wrap">
          <p class="spec-intro" v-text="page.cate.intro"></p>
          <ul class="list about-figure">
            <li class="list-item" v-for="(item,key) of page.cate.list" :key="key">
              <div class="inner-item">
                <div class="item-img">
                  <img :src="item.thumb" :alt="item.title" class="fluid-img" />
                </div>
                <h3 class="item-title">{{item.title}}</h3>
                <div class="item-intro" v-html="item.intro"></div>
              </div>
            </li>
          </ul>
          <ul class="list about">
            <li v-for="(item, key) of aboutIntro" :key="key">
              <div class="intro-item" v-html="item"></div>
            </li>
          </ul>
        </div>
      </section>
      <section class="section-container about-container">
        <PageBanner :bg_url="banner_sday" />
        <div class="section-wrap">
          <div class="about-date">
            <h3 class="date-title">REGISTRATION DEADLINE</h3>
            <ul class="list-date">
              <li class="date-item">
                <p>00</p>
                <span>DAYS</span>
              </li>
              <li class="date-item">
                <p>00</p>
                <span>HOURS</span>
              </li>
              <li class="date-item">
                <p>00</p>
                <span>MINUTES</span>
              </li>
              <li class="date-item">
                <p>00</p>
                <span>SECONDS</span>
              </li>
            </ul>
          </div>
          <ul class="list about">
            <li v-for="(item, key) of aboutIntro_two" :key="key">
              <div class="intro-item" v-html="item"></div>
            </li>
          </ul>
          <div class="btn-wrap text-center">
            <Button text="Enter Now" :to="{name: 'UserRegister'}" />
          </div>
          <ul class="list another">
            <li class="list-item" v-for="(item,key) of page.another" :key="key">
              <div class="inner-item">
                <h3 class="item-title">{{item.title}}</h3>
                <div class="item-intro" v-html="item.intro"></div>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </div>
  </main>
</template>
<script>
import Button from "@/components/Button";
import { mapGetters } from "vuex";

export default {
  name: "About",
  components: {
    Button
  },
  data() {
    return {
      page: {
        banner: {
          "background-image": `url(${require("@/assets/img/about.jpg")})`
        },
        category: ["Introduction", "Theme for 2019"],
        cate: {
          title: "About SDAY",
          list: [
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/AboutSDAY/craftsmanship%20the%20spirit%20of%20design.jpg",
              title: "Craftsmanship: The Spirit Of Design",
              intro:
                "260 entrants, including professionals and students…entrants and 3 nominators were chosen as winners."
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/AboutSDAY/the%20mission%20of%20design.jpg",
              title: "Transformation: The Mission of Design",
              intro:
                "The secretariat finally received over 200 works submitted by 96 professional individuals and teams as well as 26 student individuals and teams"
            },
            {
              thumb:
                "https://sday.design/media/upload/SDAY2019/AboutSDAY/recovery%20the%20power%20of%20design.jpg",
              title: "Recovery: The Power of Design",
              intro:
                " A total of 91 emerging design works created by 135 young designers from 16 creative cities from home and abroad were exhibited in Excellent Works Exhibition."
            }
          ],
          intro:
            "The Shenzhen Design Award for Young Talents (SDAY) is an international professional competition for young designers under the age of 35 who are from the 180 UNESCO Creative Cities worldwide. The SDAY is administered by the Shenzhen City of Design Promotion Office, organized by the Shenzhen City of Design Promotion Association (SDPA), and co-organized by the UNESCO Creative Cities Network."
        },
        another: [
          {
            title: "Administered by",
            intro: "Shenzhen City of Design Promotion Office"
          },
          {
            title: "Funded by",
            intro:
              "Shenzhen Special Fund for Cultural & Creative Industries Development"
          },
          {
            title: "Organized by",
            intro: "Shenzhen City of Design Promotion Association"
          }
        ]
      },
      introduction: [],
      banner_sday: {
        "background-image": `url(${require("@/assets/img/about_theme.jpg")})`
      },
      aboutIntro: [
        "The purpose of the SDAY is to reward the efforts of young designers who, through their creativity, have made outstanding contributions to making cities more environmentally friendly and more livable, making society more harmonious, making development more sustainable, and, above all, making human lives better.",
        "Meanwhile, the SDAY aims to encourage the exchange between young creative talents from different countries, the cooperation between the Creative Cities, the sharing of those cities’ experiences and ideas for developing creative and cultural industries, the production and sale of creative design products, and the promotion of creative design thinking ."
      ],
      aboutIntro_two: [
        "In this era flooded with commodities and over-consumption, new ethical standards ask for inclusive design. Respecting individual differences, satisfying the needs of the masses, and attaching equal importance to the functions and emotional values of objects are the new aesthetic standards that the era has asked of design.",
        "The rise of sciences and technologies, the diversity of culture, the emergence of new forces, and the turbulence in international politics and economies form the context that requires designers to have broad visions and open minds. With the integration of disciplines and the sharing of skills, designers shoulder the important mission of providing new perspectives for the public and providing new ideas for solving problems and contradictions. Only when design becomes inclusive can it create a better future for human beings."
      ]
    };
  }
};
</script>
<style lang="scss">
 @import '@/assets/scss/about';
</style>
